Posts tagged Web Development
PermalinkShowing 10 posts tagged Web Development
- How I used Astro-OG-Canvas to dynamically generate opengraph images for blog posts on my Astro site
6 min read
After putting it off for a long time, I finally decided I should dynamically generate OG images for my blog posts, since I don't use typically use a hero image or cover photos. After looking at satori with resvg, I decided that the Astro-OG-Canvas project is a much nicer fit. Here's how I set it up.
- Build a minimal blog with Deno and host it on Deno Deploy
5 min read
I'd been meaning to play around with Deno and finally got around to doing it in the quickest, easiest (and laziest) way possible -- using a minimal blog template. I also took the opportunity to learn how Deno Deploy works. The whole thing is quick and painless, here's how to do it.
- Markdown hacks
2 min read
Markdown can render A LOT of characters and symbols using specific 'entities', and can do other things like render tables, so I made myself a list of common or handy, but easy-to-forget markdown hacks based off the official Markdown Guide.
- Styling the kbd element
1 min read
I wanted to style my <kbd> element to look like a keyboard, and a google search took me to someone else's blog post that had a nice bit of code and invited others to steal it. So I did.
- Turn a static website into a progressive web app
5 min read
Frameworks and libraries are great and all, but sometimes you just want to make a simple website with only HTML, CSS and JavaScript — maybe without the latter even. When making a PWA, it’s common to use a framework like Vue or a library like Workbox, which requires a bundler like Webpack. In truth, that’s completely unnecessary!
- You should be using Nuxt-Vite module with Nuxt 2 (if it works)
3 min read
One of the not-so-great parts of developing with Nuxt is the several seconds of wait time for your dev server to warm up, and several more seconds of waiting for hot-module reloading or HMR. The forthcoming Nuxt 3 (currently in beta) will have Vite built-in for ultra-fast HMR in development. Because the Nuxt/Content module does not work with Nuxt 3 as of this writing, we must continue using Nuxt 2, but we can still get fast HMR with the awesome Nuxt-Vite module!
- How to use a custom PrismJS theme with Nuxt/Content
2 min read
PrismJS is great for making code blocks look pretty, it comes with a set of several themes out of the box, and there's also many more additional themes available as a separate package on NPM and Yarn. But what if none of those matches the color scheme of your website? With Nuxt you can easily use a custom CSS file to make your code blocks perfectly match the overall look of your site or blog. Here's how.
- How to use Netlify Forms in a Nuxt site and make sure it gets detected
3 min read
Netlify has many awesome built-in features, and one of them is Netlify Forms, which essentially handles the "back-end" of your forms in most cases. But when hosting your Nuxt site on Netlify, it may not detect it even after you follow the instructions in their documentation, usually because there's one key "trick" missing that just makes it work. So let's discuss that trick and make sure Netlify Forms does what it's supposed to.
- Setting up and configuring Nuxt/Sitemap module in a Nuxt/Content blog
4 min read
The excellent Nuxt/Sitemap module can automatically generate a new sitemap.xml at each build, and you can set either static and/or dynamic routes in it's config. It can also auto-generate routes to your blog posts (or whatever other content) fetched and displayed in a slug file, so a new post shows up with the correct route in the sitemap when created. Here's a quick and simple guide for Nuxt/Sitemap to generate routes to your Nuxt/Content blog posts, whether static or SSR.
- Using Prism.js in a Nuxt static site
3 min read
I was having some issue getting this to work on a static (not SSR) site made with Nuxt, and although I read through a bunch of blog articles, most of them seemed to be missing some piece of information or other that made it not work for me. After mixing and matching some of the instructions, and combining the useful info with the official Nuxt documentation, I finally did all the necessary steps and got it to work. So here's a clear, succinct guide to using Prism.js in a Nuxt static site.